<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台人员列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script src="/ztree/js/jquery.ztree.all.min.js"></script>
    <link rel="stylesheet" href="/css/course/course-list.css"/>
</head>
<style>
    .l{
        float: left;
    }
    .r{
        float: right;
    }
    .layui-table-cell{
        height: inherit;
        line-height: 20px;
    }
</style>
<body style="background-color: #F9F9F9">

<!--title-->
<div style="margin-left: 20px;width: 93%;height: 50px;padding-top: 10px;background-color: #F1F1F1">
    <div>
        <div style="height: 30px; width: 5px;background-color:#009688 " class="l"></div>
        <h3 class="l" style="margin-top: 5px;margin-left: 5px">后台人员列表</h3>
        <div class="r" style="margin-right: 20px">
            <button type="button" class="layui-btn" onclick="refresh()">刷新</button>
            <button type="button" class="layui-btn" onclick="backOff()">返回</button>
        </div>
    </div>
</div>

<!--检索-->
<div style="margin-left: 20px;width: 93%; height: 50px;margin-top: 20px;border: #F1F1F1 1px solid">
    <div style="padding-top: 5px;margin-bottom: 10px">
        <div class="l" style="margin-top: 10px;margin-left: 10px">
            <i class="layui-icon">&#xe615;</i>
            筛选查询
        </div>
        <div class="r" style="margin-right: 20px">
            <button class="layui-btn" onclick="advancedRetrieval()">高级检索</button>
        </div>
    </div>
</div>
<div style="margin-left: 20px;width: 93%;height: 50px;padding-top: 10px;border: #F1F1F1 1px solid">
    <form class="layui-form">

        <div class="layui-form-item l">

            <label class="layui-form-label">用户账号：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="account" placeholder="输入账号">
            </div>

            <label class="layui-form-label">用户姓名：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="trueName" placeholder="输入姓名">
            </div>

            <label class="layui-form-label">所属部门：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="deptName" placeholder="输入部门">
            </div>

            <label class="layui-form-label">注册时间：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="registerDate" placeholder="输入注册时间">
            </div>

        </div>

        <div class="r" style="margin-right: 20px">
            <button type="button" class="layui-btn" onclick="retrieval()">搜索</button>
            <button type="button" class="layui-btn layui-btn-warm" onclick="rest()">重置</button>
        </div>

    </form>
</div>

<!--主体-->
<div style="margin-left: 20px;width: 93%; height: 360px" class="layui-row">
    <!--树形分类-->
    <div class="layui-col-md2">
        <ul id="zTreeDemo" class="ztree"></ul>
    </div>

    <!--头部工具栏-->
    <div id="toolutil" style="display: none;">
        <span>
            <i class="layui-icon layui-icon-align-left"></i>
            后台人员列表
        </span>
        <span class="btnRight" style="float: right">
            <button onclick="addUser()" type="button" class="layui-btn layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-upload-circle"></i>
                添加后台人员
            </button>
            <button onclick="importUser()" type="button" class="layui-btn layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-add-1"></i>
                导入后台人员
            </button>
        </span>
    </div>


    <!--数据表格-->
    <div class="layui-col-md10">
        <table id="myTable" lay-fliter></table>
    </div>
</div>

<!--ztree右键编辑事件-->
<div id="rMenu">
    <!--<a href="javascript:newNode()" id="newNode"><i class="layui-icon">&#xe624;</i>添加</a><br>-->
    <a href="javascript:editNode()" id="editNode"><i class="layui-icon">&#xe642;</i>编辑</a><br>
    <a href="javascript:delNode()" id="delNode"><i class="layui-icon">&#xe640;</i>删除</a>
    <input type="hidden" name="nodeId">
    <input type="hidden" name="NodeParentId">
</div>
<!-- 拖拽上传 -->
<div class="layui-upload-drag" id="test10" style="display:none;width:280px;height:150px; text-align:center;">
    <br/><br/>
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
</div>
<input type="hidden" id="userId">
<input type="hidden" id="account">
</body>
<script>

    //获取当前时间
    var newTime;
    getTime();
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        newTime = myYear+'-'+myMonth+'-'+myToday+' '+myHour+':'+myMinute+':'+mySecond;
    };


    //获取当前用户信息
    var user = JSON.parse(localStorage.getItem("user"));

    /*ztree------------------*/
    //获取数据
    ztreeAjax();
    function ztreeAjax(){
        $.ajax({
            url: '/jurisdiction/getZtree'
            ,data:{}
            ,dataType: 'json'
            ,success:function(data){
                ztreeStting(data.data);
            }
        });
    }

    //计算后的时间
    var Time;
    getTimeEnd = function getTimeEnd(year,day){

        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        myYear = myYear + year;

        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)

        var myToday = myToday + day;
        if(myToday>30){
            myToday = myToday - 30;
            myMonth = myMonth + 1;
            if(myMonth > 12){
                myMonth = 1;
                myYear = myYear + 1;
            }
        }

        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        Time = myYear+'-'+myMonth+'-'+myToday+' '+myHour+':'+myMinute+':'+mySecond;
    };

    //配置ztree
    function ztreeStting(data){

        var settings = {
            data: {
                simpleData: {
                    enable: true //true 、 false 分别表示 使用 、 不使用 简单数据模式
                    ,idKey: "id"  //节点数据中保存唯一标识的属性名称
                    ,pIdKey: "parentId"    //节点数据中保存其父节点唯一标识的属性名称
                    ,rootPId: -1 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                }
            }
            /*,check: {
                enable: true   //true 、 false 分别表示 显示 、不显示 复选框或单选框
                ,nocheckInherit: true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
            }*/
            ,callback: {
                 onClick : zTreeOnClick//点击节点触发
                ,onRightClick: zTreeRigthClick//右键节点之后触发

            }
        }

        //右键节点事件   编辑节点
        function zTreeRigthClick(event, treeId, treeNode){
            if(treeNode.id != null){
                if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                    showRMenu("root", event.clientX, event.clientY,treeNodes);
                } else if (treeNode && !treeNode.noR) {
                    showRMenu("node", event.clientX, event.clientY,treeNode);
                    a=treeNode.id
                }
            }
        }
        //显示右键菜单
        function showRMenu(type, x, y,treeNode) {
            $("#rMenu ul").show();
            $(rMenu).css({"top":y+"px", "left":x+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
            $("body").bind("mousedown", onBodyMouseDown);
            $('input[name=nodeId]').val(treeNode.id);
            $('input[name=NodeParentId]').val(treeNode.parentId);
        }

        //隐藏右键菜单
        function hideRMenu() {
            $(rMenu).css({"visibility": "hidden"}); //设置右键菜单不可见
        }

        //鼠标点击菜单时调用
        function onBodyMouseDown(event) {
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                $(rMenu).css({ "visibility" : "hidden"});
            }
        }

        /*ztree节点事件*/
        //添加
        newNode = function newNode(){
            var nodeId = $('input[name=nodeId]').val();
            var NodeParentId = $('input[name=NodeParentId]').val();
            layer.open({
                 type: 0
                ,title: '添加节点'
                ,content: '<input tyope="text" placeholder="输入节点名称" id="deptName" name="deptName" class="layui-input">' +
                    '<textarea class="layui-textarea" id="deptDescirbe" name="deptDescirbe" placeholder="添加描述"></textarea>'
                ,btn: ['确定','取消']
                ,yes:function(index){
                    var deptName = $('#deptName').val();
                    var deptDescirbe = $('#deptDescirbe').val();
                    $.ajax({
                          url: '/jurisdiction/addNode'
                         ,data: {
                              'parentId': nodeId
                             ,'name': deptName
                             ,'createDate': newTime
                             ,'updateDate': newTime
                             ,'createId': user.trueName
                             ,'updateId': user.trueName
                             ,'status': 1
                             ,'deptDescirbe': deptDescirbe
                         }
                         ,dataType: 'json'
                         ,success:function(data){
                            if(data.data){
                                layer.msg('添加成功');
                            }
                         }
                         ,error:function(){
                         }
                     });
                    layer.close(index);
                }
                ,btn2:function(index){
                    layer.close(index);
                }
                ,end:function(){
                    ztreeAjax();
                }
            });
        }
        //编辑
        editNode = function editNode(){
            var nodeId = $('input[name=nodeId]').val();
            var NodeParentId = $('input[name=NodeParentId]').val();
            layer.open({
                 type: 0
                ,title: '修改节点'
                ,content: '<input class="layui-input" type="text" id="deptName" placeholder="输入新的节点名称"/>' +
                    '<textarea id="deptDescirbe" class="layui-textarea" placeholder="部门描述"></textarea>'
                ,btn: ['确定','取消']
                ,yes:function(index){
                    var deptName = $('#deptName').val();
                    var deptDescirbe = $('#deptDescirbe').val();
                    $.ajax({
                         url: '/jurisdiction/editNode'
                        ,data: {
                             'name': deptName
                            ,'deptDescirbe': deptDescirbe
                            ,'id': nodeId
                        }
                        ,dataType: 'json'
                        ,success:function(data){
                             if(data.data){
                                 layer.msg('修改成功');
                                 layer.close(index);
                             }
                        }
                    });
                }
                ,btn2:function(index){
                     layer.close(index);
                }
                ,end:function(){
                    ztreeAjax();
                }
            });
        }

        //删除
        delNode = function delNode(){
            var nodeId = $('input[name=nodeId]').val();
            var NodeParentId = $('input[name=NodeParentId]').val();
            layer.open({
                type: 0
                , title: '删除节点'
                , content: '您是否要删除此节点？'
                , btn: ['确定', '取消']
                ,yes:function(index){
                    $.ajax({
                        url: '/jurisdiction/delNode'
                        ,data:{id: nodeId}
                        ,dataType: 'json'
                        ,success:function(data){
                            if(data.data){
                                layer.msg('删除成功');
                            }
                        }
                    });
                    layer.close(index);
                }
                ,btn2:function(index){
                    layer.close(index);
                }
                ,end:function(){
                    ztreeAjax();
                }
            });

        }

        //点击节点事件    根据节点查询列表
        function zTreeOnClick(event,treeId,treeNode){
            tableAjax(treeNode.id)
        }
        zTreeObj = $.fn.zTree.init($("#zTreeDemo"), settings, data); //初始化树
        zTreeObj.expandAll(true);    //true 节点全部展开、false节点收缩

    }







    layui.use(['jquery','table','form','layer','upload'],function () {
        var $ = layui.$,
            table = layui.table,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

    /*table-----------------*/
    //获取数据

    tableAjax = function tableAjax(data){
        $.ajax({
            url: '/jurisdiction/getBackstageStaffs'
            ,data: {deptId: data}
            ,dataType: 'json'
            ,success:function(data){
                tableRender(data.data);
            }
        });
    }
    tableAjax('');
    //table渲染
        tableRender = function tableRender(data){
        table.render({
             elem: '#myTable'
            ,data: data
            ,toolbar: '#toolutil'
            ,page: true
            ,cols: [[
                 {checkbox: true}
                ,{type: 'numbers',title: '序号',align: 'center'}
                ,{field: 'trueName',title: '用户姓名',align: 'center'}
                ,{field: 'acatarUrl',title: '用户头像',align: 'center',templet:function(data){
                    return '<img src="'+data.acatarUrl+'">'
                    }}
                ,{field: 'sex',title: '性别',align: 'center'}
                ,{field: 'deptId',title: '所属部门',align: 'center',templet:function (data) {
                        var user = data;
                        var deptName = '';
                        $.ajax({
                            url: '/jurisdiction/getZtree'
                            ,data:{}
                            ,dataType: 'json'
                            ,async: false
                            ,success:function(data){
                                var dept = data.data;
                                for(var i=0; dept.length>0; i++){
                                    if(dept[i].id == user.deptId){
                                        deptName = dept[i].name;
                                        break;
                                    }
                                }
                            }
                        });

                        return deptName;
                    }}
                ,{field: 'enabled',title: '是否启用',align: 'center',templet:function(data){
                        if(data.enabled == 1){
                            return '<input value="'+data.userId+'" type="checkbox" lay-skin="switch" lay-filter="kg" lay-text="启用|停用" checked/>';
                        }else if(data.enabled == 2){
                            return '<input value="'+data.userId+'" type="checkbox" lay-skin="switch" lay-filter="kg" lay-text="启用|停用"/>';
                        }else{
                            return '数据错误';
                        }

                    }}
                ,{field: 'status',title: '账号状态',align: 'center',templet:function(data){
                    if(data.status == 1){
                        return '<input value="'+data.userId+'" type="checkbox" lay-skin="switch" lay-filter="kgtwo" lay-text="使用中|已封禁" checked/>';
                    }else if(data.status == 2){
                        return '已注销';
                    }else if(data.status == 3){
                        return '<input value="'+data.userId+'" type="checkbox" lay-skin="switch" lay-filter="kgtwo" lay-text="使用中|已封禁"/>';
                    }else if(data.status == 4){
                        return '<input value="'+data.userId+'" type="checkbox" lay-skin="switch" lay-filter="kgtwo" lay-text="使用中|已封禁"/>';
                    }else{
                        return '数据错误';
                    }

                    }}
                ,{field: 'registerDate',title: '注册时间',align: 'center'}
                ,{title: '操作',align: 'center',templet:function(data){
                    return ' <a style="color: #0DAB9E;" onclick="see('+data.userId+')">查看</a>' +
                        ' <a style="color: #0DAB9E;" onclick="jurisdiction('+data.userId+')">权限</a>' +
                        '<br/>' +
                        ' <a style="color: #0DAB9E;" onclick="edit('+data.userId+')">编辑</a>'+
                        ' <a style="color: #0DAB9E;" onclick="shutDown(\''+data.userId+'\',\''+data.account+'\',\''+data.status+'\')">封停</a>';
                    }}
                ,
            ]]
        });
    }


    //添加后台人员
    addUser = function addUser() {
        window.location = 'backstageStaff-list-add.html';
    }


    //导入后台人员
    importUser = function importUser(){
        layer.open({
            type:1,
            title:'拖拽文件',
            content:$('#test10'),
            area:['350px','300px'],
            offser:'auto',
            shade:0.4
        });
    }
    upload.render({
        elem: '#test10'
        ,auto: true
        ,url: '/jurisdiction/importExcel'
        ,accept: 'file'
        ,field: 'file'
        ,done: function(res){
            layer.msg('上传成功');
        }
    });

    //监听 使用中/已禁用 开关
    form.on('switch(kgtwo)',function(obj){
        var checked = obj.elem.checked;
        var userId = obj.value;
        var enabled;
        var status;
        if(checked){
            status = 1;
            enabled = 1;

            layer.open({
                 type: 0
                ,title: '解封操作'
                ,content: '<input type="text" class="layui-input" placeholder="输入解封缘由" id="reason"/>'
                ,btn:['确定','取消']
                ,yes:function(index) {
                    var reason = $('#reason').val();

                    //获取封禁信息
                    $.ajax({
                        url: '/jurisdiction/getShutDown'
                        ,data: {'userId':userId}
                        ,dataType: 'json'
                        ,success:function(data){
                            var closure = data.data
                            //添加解封日志
                            $.ajax({
                                url: '/jurisdiction/addUnseal'
                                ,data: {
                                    'userCode': closure.userId
                                    ,'account': closure.account
                                    ,'endDate': newTime
                                    ,'reason': reason
                                    ,'days': closure.days
                                    ,'type': closure.type
                                    ,'createdId': user.userId
                                }
                                ,dataType: 'json'
                                ,success:function(data){



                                    //解封   删除封停记录
                                    $.ajax({
                                        url: '/jurisdiction/delShutDown'
                                        ,data: {'userId':userId}
                                        ,dataType: 'json'
                                        ,success:function(data){
                                            kgStatus();
                                        }
                                    })






                                }
                            });





                        }
                    })





                }
            });





        }else if(!checked){
            status = 4;
            enabled = 2;
            getTimeEnd(100,0);
            //紧急封停   添加封停记录
            $.ajax({
                url: '/jurisdiction/shutDown'
                ,data: {
                     'userId':userId
                    ,'type': 3
                    ,'reason': '紧急封停'
                    ,'startDate': newTime
                    ,'endDate': Time
                    ,'days': 36500
                    ,'remarks': '紧急封停'
                }
                ,dataType: 'json'
                ,success:function(data){
                    kgStatus();
                }
            })
        }else{
            layer.msg("后台数据错误");
        }
        function kgStatus(){
            $.ajax({
                url: '/jurisdiction/kgStatus'
                ,data: {
                    'status': status
                    ,'userId': userId
                    ,'enabled': enabled
                }
                ,dataType: 'json'
                ,success:function(data){
                    if(data.data){
                        if(checked){
                            layer.msg('已解除封禁');
                            tableAjax('');
                        }else if(!checked){
                            layer.msg('已封禁');
                            tableAjax('');
                        }else{
                            lauer.msg('后台数据错误');
                        }
                    }
                }
            });
        }

    });

    //监听 启用|冻结 开关
    form.on('switch(kg)',function (obj) {
        var checked = obj.elem.checked;
        var userId = obj.value;
        //enabled
        if(checked){
            $.ajax({
                url: '/jurisdiction/enableAccount'
                ,data: {
                     'enabled': 1
                    ,'userId': userId
                }
                ,dataType: 'json'
                ,success:function(data){
                    if(data.data){
                        layer.msg("已启用");
                    }
                }
            });
        }else if(!checked){
            $.ajax({
                url: '/jurisdiction/enableAccount'
                ,data: {
                    'enabled': 2
                    ,'userId': userId
                }
                ,dataType: 'json'
                ,success:function(data){
                    if(data.data){
                        layer.msg("已停用");
                    }
                }
            });
        }else{
            layer.msg("后台数据出错");
        }
    });

    //列表操作列
    //查看
    see = function see(id){
        $('#userId').val(id);
        layer.open({
             type: 2
            ,title: '查看用户详情信息'
            ,content: 'popup/backstageStaff-list-see.html'
            ,area: ['1260px','560px']
        });
    }
    //权限
    jurisdiction = function jurisdiction(id){
        $('#userId').val(id);
        layer.open({
            type: 2
            ,title: '设置用户权限'
            ,content: 'popup/backstageStaff-list-jurisdiction.html'
            ,area: ['800px','400px']
        });
    }
    //编辑
    edit = function edit(id){
        $('#userId').val(id);
        layer.open({
            type: 2
            ,title: '编辑后台人员信息'
            ,content: 'popup/backstageStaff-list-edit.html'
            ,area: ['1260px','560px']
        });
    }

    //封停
    shutDown = function shutDown(id,account,status){
        $('#userId').val(id);
        $('#account').val(account);
        if(status == 4){
            layer.msg('该账户已封禁');
        }else{
            layer.open({
                type: 2
                ,title: '查看用户详情信息'
                ,content: 'popup/backstageStaff-list-shutDown.html'
                ,area: ['530px','385px']
            });
        }
    }


    //高级检索
    advancedRetrieval = function advancedRetrieval(){
        layer.open({
             type: 2
            ,title: '高级检索'
            ,content: 'popup/advancedRetrieval.html'
            ,area: ['650px','320px']
        })
    }
    
    
    //检索
    retrieval = function retrieval(){

        var account = $('input[name=account]').val();
        var deptName = $('input[name=deptName]').val();
        var registerDate = $('input[name=registerDate]').val();
        var trueName = $('input[name=trueName]').val();

        var data = {
             'account': account
            ,'deptName': deptName
            ,'registerDate': registerDate
            ,'trueName': trueName
        }

        $.ajax({
            url: '/jurisdiction/retrieval'
            ,data: data
            ,dataType: 'json'
            ,success:function(data){
                tableRender(data.data);
            }
        });
    }
    //检索方案2
    /*form.on('submit(sub)',function (obj) {
        $.ajax({
             url: '/jurisdiction/retrieval'
            ,data: obj.field
            ,dataType: 'json'
            ,success:function(data){
                tableAjax(data.data);
            }
        });
    });*/

    //重置检索内容
    rest = function rest() {
        $('input[name=account]').val('');
        $('input[name=deptName]').val('');
        $('input[name=registerDate]').val('');
        $('input[name=trueName]').val('');
    }

        //返回
        backOff = function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }
        //刷新
        refresh = function refresh(){
            window.location.reload();
        }
});





</script>
</html>